<!-- 分类 -->
<template>
    <div class="Parentbox">
        <div>
            <div class="bovin">
                <div class="card">
                    <!-- 顶部 -->
                    <div>

                        <Head></Head>
                    </div>

                    <p>产品详情 >
                        {{ Routeparameter }}
                        {{ Route }}
                    </p>
                    <div style=" display: flex; margin-left: 30px;">
                        <div style=" margin-top: 50px; width: 247px; height: 153px;">
                            <div @click="$router.push('/capitalsourcestoreshop')"
                                style=" cursor: pointer; height: 36px; background-color: #f2f2f2; line-height: 36px;  font-weight: 700;">
                                <i style="color: #808080; margin-left: 5px;" class="iconfont icon-dianpu"></i>
                                <span style="margin-left: 5px;">{{ data[0].site }}</span>
                            </div>
                            <div style=" margin-top: 15px; margin-bottom: 15px; font-size: 13px;">{{ data[0].compellation }}
                            </div>
                            <div style="margin-bottom: 15px; font-size: 13px;"><span>联系人</span> {{ data[0].phone }}</div>
                            <div style="margin-bottom: 15px; font-size: 13px;"><span>邮箱</span> {{ data[0].e_mail }}</div>
                        </div>
                        <div style="margin-left: 37px;">
                            <h3>{{ data[0].freight }}</h3>
                            <div style="margin-bottom: 30px; margin-top: 30px; font-size: 17px;"><span>发行机构：</span> <span>{{
                                data[0].site
                            }}</span></div>
                            <div style="margin-bottom: 30px; font-size: 17px;">{{ data[0].money }}</div>
                            <div style="margin-bottom: 30px; font-size: 17px;">{{ data[0].money }}</div>
                        </div>
                        <div style="margin-left: 80px; margin-top: 75px;">
                            <div style="margin-bottom: 30px;font-size: 17px;">
                                <span>{{ data[0].guarantee }}</span>
                            </div>
                            <div style="margin-bottom: 30px;font-size: 17px;">
                                <span>{{ data[0].Financingterm }}</span>
                            </div>
                            <div style="margin-bottom: 30px;font-size: 17px;">
                                <span>{{ data[0].contact }}</span>
                            </div>
                        </div>
                        <div style="margin-left: 80px; margin-top: 80px;">
                            <el-form label-width="100px" :model="ruleForm" :rules="rules" ref="ruleForm">
                                <el-form-item label="申请金额： " prop="name">
                                    <el-input style="width: 119px;height: 26px;" v-model="ruleForm.name"></el-input>
                                    <span>万元</span>
                                </el-form-item>
                                <el-form-item label="申请期限： " prop="age">
                                    <el-input style="width: 119px;height: 26px; margin-right: 10px;"
                                        v-model="ruleForm.age"></el-input> <span>月</span>
                                </el-form-item>
                            </el-form>
                            <div style="display: flex; justify-content: end;">
                                <el-button type="primary" @click="submitForm"
                                    style=" width: 119px; transform: translate(-30px, 0px);">立刻申请</el-button>
                            </div>

                        </div>
                    </div>

                    <div style=" margin-top: 30px; height: 60px; background-color: #f7f8fa; width: 103.5%;">
                        <div>
                            <el-tabs v-model="activeName">
                                <el-tab-pane label="商品介绍" name="first">
                                    <div style=" width: 98.2%; height: 555px; background-color: #fafafa;">
                                        <div>
                                            <div class="triangle">
                                                产品介绍
                                                <div class="rightdeltoid"></div>

                                            </div>
                                            <span class="characters">针对正常纳税的中小微企业，提供的小额信用类货款</span>
                                        </div>
                                        <div>
                                            <div class="triangle">
                                                产品特点
                                                <div class="rightdeltoid"></div>
                                            </div>
                                            <span class="characters">线上申请 极速测额 循环使用 随借随还</span>
                                        </div>
                                        <div>
                                            <div class="triangle">
                                                适用客户
                                                <div class="rightdeltoid"></div>
                                            </div>
                                            <span class="characters">本市注册且正常纳税的中小微企业</span>
                                        </div>
                                        <div>
                                            <div class="triangle">
                                                申请条件
                                                <div class="rightdeltoid"></div>
                                            </div>
                                            <span class="characters">具有两年 (含) 以上纳税记录且纳税记录良好</span>
                                        </div>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="商品评价" name="second">
                                    <div style="margin-left: 30px;">
                                        <el-tabs v-model="Name">
                                            <el-tab-pane label="全部评价" name="first">
                                                <el-empty></el-empty>
                                            </el-tab-pane>
                                            <el-tab-pane label="晒图" name="second">
                                                <el-empty></el-empty>
                                            </el-tab-pane>
                                            <el-tab-pane label="好评" name="third">
                                                <el-empty></el-empty>
                                            </el-tab-pane>
                                            <el-tab-pane label="中平" name="fourth">
                                                <el-empty></el-empty>
                                            </el-tab-pane>
                                            <el-tab-pane label="差评" name="fourthone">
                                                <el-empty></el-empty>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import Head from "./components/head.vue"
export default {
    components: {
        Head
    },
    data() {
        return {
            Name: 'first',
            activeName: 'first',
            Routeparameter: this.$route.params.id,
            Route: this.$route.params.name,
            ruleForm: {
                name: "",
                age: "",
            },
            rules: {
                name: [
                    { required: true, message: '请输入金额', trigger: 'blur' },
                ],
                age: [
                    { required: true, message: '请输入月份', trigger: 'blur' },
                ]
            },
            data: {}
        }
    },
    computed: {
        ...mapState({ list: state => state.list })
    },
    created() {
        this.information()
    },
    methods: {
        submitForm() {
            this.$refs.ruleForm.validate((ok) => {
                if (ok) {
                    console.log('校验通过');
                    this.$router.push('/ordertime')
                }
            })
        },
        information() {
            this.data = { ...this.list }
            console.log(this.data, '数据');
        }
    }
}
</script>

<style lang="less" scoped>
.bovin {
    display: flex;
    height: 1150px;
    justify-content: center;
    background-color: #f7f8fa;
}

.card {
    width: 1304px;
    height: 1102px;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 20px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    .triangle {
        position: relative;
        width: 290px;
        height: 50px;
        border: 1px solid #e8e8e8;
        border-right: none;
        background-color: #f2f2f2;
        text-align: center;
        line-height: 50px;
        font-size: 17px;
        font-weight: 900;
        margin-left: 38px;
        transform: translateY(33px);
        margin-bottom: 60px;

        .rightdeltoid {
            position: absolute;
            top: 13px;
            right: -38px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 25px 24px;
            border-color: transparent transparent #e8e8e8;
            transform: rotate(451deg);
        }

        .rightdeltoid:after {
            content: '';
            border-style: solid;
            border-width: 0 24px 23px;
            border-color: transparent transparent #f2f2f2;
            position: absolute;
            top: 3px;
            left: -24px;
            transform: rotate(360deg);
        }

    }

    .characters {
        margin-left: 38px;
    }
}

/deep/.el-input-group__append button.el-button {
    width: 80px;
    color: #ffffff;
    border: 1px solid #4d79ff;
    background-color: #4d79ff;
    background-image: linear-gradient(160deg, #4d79ff 0%, #4d94ff 100%);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

/deep/.el-card.is-always-shadow {
    box-shadow: none
}

/deep/.el-card {
    border: none
}

/deep/.el-tabs__nav-wrap::after {
    height: 0px;
}

/deep/.el-tabs__item {
    margin-top: 5px;
}

/deep/.el-tabs__nav-scroll {
    width: 950px;
    margin-top: 10px;
    background-color: #f7f8fa;
}
</style>